@primary-color: #1890ff;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #f5222d;
@heading-color: #333333;
@text-color: #666666;
@border-color: #f0f0f0;
@background-color: #f5f5f5;

.tree-menu-page {
  padding: 24px;
  background-color: @background-color;
  min-height: 100vh;

  .page-header {
    margin-bottom: 24px;

    .page-title {
      font-size: 24px;
      font-weight: bold;
      color: @heading-color;
      margin-bottom: 8px;
    }

    .page-description {
      color: @text-color;
      font-size: 14px;
    }
  }

  .content-container {
    display: flex;
    gap: 24px;

    .menu-sidebar {
      width: 320px;
      flex-shrink: 0;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;

      .sidebar-header {
        padding: 16px;
        border-bottom: 1px solid @border-color;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-title {
          font-size: 16px;
          font-weight: 500;
          color: @heading-color;
          margin: 0;
        }
      }

      .tree-container {
        padding: 16px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;

        .ant-tree {
          .ant-tree-treenode {
            padding: 4px 0;

            &.draggable {
              cursor: move;
            }

            .ant-tree-node-content-wrapper {
              padding: 6px 8px;
              border-radius: 4px;
              transition: all 0.3s;

              &:hover {
                background-color: #f5f5f5;
              }

              .tree-node-content {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .node-title {
                  display: flex;
                  align-items: center;
                  gap: 8px;

                  .node-icon {
                    font-size: 16px;
                    color: @primary-color;
                  }

                  .node-text {
                    font-size: 14px;
                    color: @heading-color;
                  }
                }

                .node-actions {
                  opacity: 0;
                  transition: opacity 0.3s;
                  display: flex;
                  gap: 4px;
                }
              }

              &:hover {
                .node-actions {
                  opacity: 1;
                }
              }
            }
          }
        }
      }

      .sidebar-footer {
        padding: 16px;
        border-top: 1px solid @border-color;
        display: flex;
        justify-content: space-between;

        .total-items {
          color: @text-color;
          font-size: 14px;
        }
      }
    }

    .content-main {
      flex: 1;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      padding: 24px;

      .form-container {
        .form-title {
          font-size: 18px;
          font-weight: 500;
          color: @heading-color;
          margin-bottom: 24px;
          padding-bottom: 16px;
          border-bottom: 1px solid @border-color;
        }

        .form-section {
          margin-bottom: 24px;
        }

        .form-footer {
          margin-top: 24px;
          padding-top: 16px;
          border-top: 1px solid @border-color;
          display: flex;
          justify-content: flex-end;
          gap: 8px;
        }
      }

      .preview-container {
        .preview-title {
          font-size: 18px;
          font-weight: 500;
          color: @heading-color;
          margin-bottom: 24px;
          padding-bottom: 16px;
          border-bottom: 1px solid @border-color;
        }

        .preview-content {
          min-height: 200px;
          padding: 16px;
          border: 1px dashed @border-color;
          border-radius: 4px;
          background-color: #fafafa;
        }
      }
    }
  }

  .tree-node-highlight {
    background-color: #e6f7ff;
    border-radius: 4px;
  }

  .custom-tree-node {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .node-content {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .node-actions {
      visibility: hidden;
    }

    &:hover .node-actions {
      visibility: visible;
    }
  }

  .node-tag {
    margin-left: 8px;
  }

  .menu-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;

    .stat-card {
      flex: 1;
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

      .stat-title {
        font-size: 14px;
        color: @text-color;
        margin-bottom: 8px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: @heading-color;
      }
    }
  }

  .search-container {
    margin-bottom: 16px;
  }

  .node-badge {
    margin-left: 8px;
  }

  .drop-indicator {
    position: absolute;
    height: 2px;
    background-color: @primary-color;
    width: 100%;
    z-index: 1;
    pointer-events: none;
  }
}
